<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D探索</title>
  <!-- 引入Three.js库 -->
  <script src="./js/three.min.js"></script>
  <!-- 引入GLTFLoader -->
  <script src="./js/GLTFLoader.js"></script>
  <!-- 引入OrbitControls 早期版本 -->
  <script src="./js/OrbitControls.js"></script>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }

    canvas {
      display: block;
    }
  </style>
</head>

<body>
  <script>
    // 初始化页面加载完成后的逻辑
    window.addEventListener('load', function () {
      var scene, camera, renderer, clock, loader, mixer, controls;

      // 创建场景
      scene = new THREE.Scene();
      scene.background = new THREE.Color("#88B9DD");

      // 创建透视相机
      camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.z = 10;

      // 创建WebGL渲染器并添加到DOM
      renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      // 加载器实例化
      loader = new THREE.GLTFLoader();

      // 加载模型
      loader.load(
        // 模型文件路径
        'model/mubiao/scene.gltf',
        // 成功加载回调函数
        function (gltf) {
          var model = gltf.scene;
          // 模型缩放
          model.scale.set(300, 300, 300);
          // 添加模型到场景
          scene.add(model);

          // 如果模型包含动画
          if (gltf.animations && gltf.animations.length) {
            mixer = new THREE.AnimationMixer(model);
            mixer.clipAction(gltf.animations[0]).play();
          }

          // 添加光照（例如环境光和方向光）
          const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
          scene.add(ambientLight);

          const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
          directionalLight.position.set(10, 10, 10);
          scene.add(directionalLight);

          // 初始化轨道控制器
          controls = new THREE.OrbitControls(camera, renderer.domElement);
          controls.enablePan = true;  // 禁止右键拖拽
          controls.enableZoom = true; // 禁止缩放 默认true
          controls.enableRotate = true; // 禁止旋转
          controls.minZoom = 0.5;// 缩放范围
          controls.maxZoom = 2;

          // 开始渲染循环
          animate();
        },
        // 进度回调函数（可选）
        function (xhr) {
          console.log((xhr.loaded / xhr.total * 100) + '% loaded');
        },
        // 错误处理回调函数
        function (error) {
          console.error('An error happened while loading the model!', error);
        }
      );

      // 渲染循环
      function animate() {
        requestAnimationFrame(animate);

        // 更新动画混合器（如果有）
        if (mixer) {
          mixer.update(clock.getDelta());
        }

        // 更新轨道控制器
        if (controls) {
          controls.update();
        }

        renderer.render(scene, camera);

        // 随着窗口尺寸变化，更新相机视口和投影矩阵
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
      }

      // 创建一个虚拟时钟用于动画更新
      clock = new THREE.Clock();

      // 启动渲染循环
      animate();
    });
  </script>
</body>

</html>